<template>
	<Popup height="920rpx">
		<view class="start-name-popup">
			<view class="head">
				<view class="title">
					{{isEnd ? '选择终点项目':'选择起点项目'}}
				</view>
				<view class="cancel" @click="saveStartProject(0)">
					取消
				</view>
			</view>
			<view class="search-box">
				<image src="/static/img/common/search.png" class="icon"></image>
				<input class="search-input" v-model="searchText" placeholder="请输入项目名称" />
				<view class="search-btn" @click="searchProject">搜索</view>
			</view>
			<!-- <ButtonBox :btnArr="startProjectTypes" @btnClick="changeStartProjectType" /> -->
			<view class="start-project-list">
				<RadioComp name='projectName' class="item" :info="item" v-for="item in startProjectList"
					:key="item.projectId" :nowId="nowItem.projectId" @click="changeStartProjectItem(item)"></RadioComp>
			</view>
			<Button1 class="save-btn" @click="saveStartProject(1)">确定</Button1>
		</view>
	</Popup>
</template>

<script setup lang="ts">
	import { ref, watchEffect } from 'vue';
	import Button1 from '@/components/button1/button1.vue';
	// import ButtonBox from '@/components/buttonBox/buttonBox.vue';
	import RadioComp from '@/components/radioComp/radioComp.vue';
	import Popup from '@/components/popup/popup.vue';
	const emits = defineEmits(['saveStartProject'])

	const props = defineProps({
		isShowStartProjectPopup: {
			type: Boolean,
			default: false
		},
		isEnd: {
			type: Boolean,
			default: false,
		},
		addressList: {
			type: Array,
			default: () => [],
		},
		nowAddr: {
			type: Object,
			default: () => ({})
		}
	})
	// 搜索文字
	const searchText = ref('')
	// 搜索项目
	const searchProject = () => {
		startProjectList.value = props.addressList.filter(item => item.projectName.includes(searchText.value))
	}
	// 起点项目类型
	const startProjectTypes = ['有计划', '无计划']
	// 起点项目列表
	const startProjectList = ref(props.addressList)
	// 当前起点id
	const nowItem = ref(props.addressList[0])
	watchEffect(() => {
		nowItem.value = props.nowAddr
	})
	// 修改当前起点项目名称
	const changeStartProjectItem = (item) => {
		nowItem.value = item
	}

	// 保存当前起点项目名称
	const saveStartProject = (type) => {
		if (type == 1) {
			emits('saveStartProject', nowItem.value)

		} else {
			emits('saveStartProject')
		}
	}

	// console.log("dsd", props.addressList)
</script>

<style scoped lang="scss">
	.start-name-popup {
		padding: 48rpx 32rpx 68rpx;

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}


		.search-box {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;
			padding: 22rpx 24rpx;
			width: 686rpx;
			background-color: #EFF6FE;
			border-radius: 8rpx;
			box-sizing: border-box;

			.icon {
				margin-right: 6rpx;
				width: 27rpx;
				height: 27rpx;
			}

			.search-input {
				flex: 1;
				font-size: 24rpx;
			}

			.search-btn {
				border-left: 2rpx solid rgba(152, 157, 165, 0.1);
				padding-left: 36rpx;
				font-size: 28rpx;
				color: $primary-color;
			}
		}

		.start-project-list {
			max-height: 480rpx;
			overflow-y: hidden;
			overflow-y: scroll;

			.item {
				margin-top: 36rpx;
			}
		}

		.save-btn {
			margin-top: 80rpx;
			width: 100%;
			height: 84rpx;
			font-size: 28rpx;
			line-height: 56rpx;
			text-align: center;
			border-radius: 60rpx;
		}
	}
</style>